<template>
    <div class="nav_top">
        <div class="nav_head">
            <router-link to="/cate" class="go_back iconfont icon-fanhui-copy-copy"></router-link>
            <h1>品类精选</h1>
        </div>
        <div class="nav_list" ref="nav_list">
            <ul ref="ul" class="list_content" >
                <li v-for="(item,index) in infoArr" :key="index"  @click="handleSelectionId(index)">{{item}}</li>
            </ul>
            <span class="nav_bar" :style="{transform:'translateX('+transX+'px)'}"></span>
        </div>
    </div>
</template>

<script>
import BScroll from '@better-scroll/core'
    export default {
        data(){
            return{
                transX:0,
                infoArr:['白酒','葡萄酒','洋酒','牛栏山','奔富']
            }
        },
        mounted () {
            //打开横向滚动
            // let bs = 
            new BScroll(this.$refs.nav_list,{
                scrollX:true,
                probeType:2,
                click:true
            });
            // let {nav_list,ul} =this.$refs//获取到导航栏dom元素
            // let sMax =ul.offsetWidth -nav_list.offsetWidth
            // // 开启滚动监听
            // bs.on('scroll', (position) => {
            //     let sx = Math.abs(position.x)
            //     this.transX= (sx/sMax)*(nav_list.offsetWidth-30)
            // })
        },
        methods: {
            handleSelectionId(idx) {
                this.$store.commit('SelectionPage/changePageId',idx)
            }
        },
    }
</script>
<style scoped lang="css" src="../assets/css/SelectionPage.css">

</style>
<style lang="sass" scoped>

</style>